package com.xi.jetcomposedemo.ui.compose

import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension

@Composable
fun ConstraintLayoutContent(modifier: Modifier = Modifier) {
    ConstraintLayout(modifier = modifier) {
        val (button, text) = createRefs()
        Button(
            onClick = {},
            // 使用Modifier.constrainAs来提供约束，引用作为它的第一个参数
            // 在lambda表达式中指定约束规则
            modifier = Modifier.constrainAs(button) {
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text(text = "Button")
        }

        Text(text = "文本", modifier = Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = 16.dp)
            // 在ConstraintLayout中水平居中
            centerHorizontallyTo(parent)
        })
    }
}

@Composable
fun BarrierConstraintLayoutContent(modifier: Modifier = Modifier) {
    ConstraintLayout(modifier = modifier) {
        val (button1, button2, text) = createRefs()
        Button(
            onClick = {},
            // 使用Modifier.constrainAs来提供约束，引用作为它的第一个参数
            // 在lambda表达式中指定约束规则
            modifier = Modifier.constrainAs(button1) {
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text(text = "Button1")
        }

        Text(text = "Text", Modifier.constrainAs(text) {
            top.linkTo(button1.bottom, margin = 16.dp)
            centerAround(button1.end)
        })

        val barrier = createEndBarrier(button1, text)
        Button(
            onClick = {},
            // 使用Modifier.constrainAs来提供约束，引用作为它的第一个参数
            // 在lambda表达式中指定约束规则
            modifier = Modifier.constrainAs(button2) {
                top.linkTo(parent.top, margin = 16.dp)
                start.linkTo(barrier)
            }
        ) {
            Text(text = "Button2")
        }
    }
}

@Composable
fun GuidelineConstraintLayout(modifier: Modifier = Modifier) {
    ConstraintLayout(modifier = modifier) {
        val text = createRef()
        val guideline = createGuidelineFromStart(fraction = 0.5F)
        Text(text = "This is a very very very very very very long text", Modifier.constrainAs(text) {
            linkTo(start = guideline, end = parent.end)
            width = Dimension.preferredWrapContent
        })
    }
}

@Composable
fun DecoupledConstraintLayout(modifier: Modifier = Modifier) {
    BoxWithConstraints(modifier = modifier, ) {
        val constraints = if (isPortrait()) {
            decoupledConstraints(32.dp)
        } else {
            decoupledConstraints(9.dp)
        }
        ConstraintLayout(constraintSet = constraints) {
            Button(
                onClick = {},
                // 使用Modifier.constrainAs来提供约束，引用作为它的第一个参数
                // 在lambda表达式中指定约束规则
                modifier = Modifier.layoutId("button")
            ) {
                Text(text = "Button")
            }

            Text(text = "解耦约束", modifier = Modifier.layoutId("text"))
        }
    }
}

private fun decoupledConstraints(margin: Dp): ConstraintSet {
    return ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")
        constrain(button) {
            top.linkTo(parent.top, margin)
        }
        constrain(text) {
            top.linkTo(button.bottom, margin)
            // 在ConstraintLayout中水平居中
            centerHorizontallyTo(parent)
        }
    }
}